/**
 * Created by chenzui on 2017/5/5.
 */
var PersonalHead = React.createClass({
    handleIndexPageClick: function() {
        location.href = 'index.html';
    },
    render: function() {
        return (
            <header data-am-widget="header" className="am-header am-header-default  am-header-fixed ">
                <div className="am-header-left am-header-nav">
                    <a  className="">
                        <i className="icon_setting"></i>
                    </a>
                </div>
                <h1 className="am-header-title">
                    我的
                </h1>
                <div className="am-header-right am-header-nav am-dropdown" id="am-dropdown">
                    <a >

                    </a>
                    <div className=" am-dropdown-toggle icontopmore " id="am-dropdown-toggle"> </div>
                    <ul className="am-dropdown-content">
                        <li className="padding-left-20"><a onClick={this.handleIndexPageClick} className="font-color-45 prelative ">首页</a></li>
                    </ul>
                </div>
            </header>
        )
    }
});

var UserInfo = React.createClass({
    handleUserInfosClick: function(){
        location.href = 'userInfos.html';
    },
    render: function() {
        return (
            <div className="my-top  font-color-white prelative" >
                <div className="am-padding-top-sm">
                    <div className=" am-center width-60px" onClick={this.handleUserInfosClick}><img src="../assets/images/icons/tx_2.png" className="am-circle am-text-center"/></div>
                    <div className="  am-text-center am-margin-top-xs">
                        <div className="font-color-white font-14 padding-top-2">15152218739</div>
                    </div>
                </div>
            </div>
        )
    }
});

var Orders = React.createClass({
    handleAllOrderClick: function(){
        location.href='myOrders.html';
    },
    render: function(){
        return(
            <div className="bg-white am-margin-top-sm am-padding-left-sm">
                <div onClick={this.handleAllOrderClick} className="box font-16 am-padding-bottom-ss am-padding-top-ss prelative border-bottom">
                    <div className="box-1">我的订单</div>
                    <div className=" font-14 am-padding-right-sm am-margin-right-sm padding-top-3">全部订单</div>
                    <i className="icon-arrow-right"></i>
                </div>
                <div className="am-g am-g-collapse am-text-center font-color-1 font-12 am-padding-bottom-sm am-padding-top-sm">
                    <div onclick="window.location.href='016.html'" className="am-u-sm-3 ">
                        <div className="prelative"><img src="../assets/images/icons/icon_1.png" className="width-30px am-center"/>
                            <i className="statustnum">12</i>
                        </div>
                        <div className="margin-top-3">待付款</div>
                    </div>
                    <div onclick="window.location.href='016.html'" className="am-u-sm-3 ">
                        <div className="prelative"><img src="../assets/images/icons/icon_2.png" className="width-30px am-center"/> <i className="statustnum">12</i></div>
                        <div className="margin-top-3">待发货</div>
                    </div>
                    <div onclick="window.location.href='016.html'" className="am-u-sm-3 ">
                        <div className="prelative"><img src="../assets/images/icons/icon_3.png" className="width-30px am-center"/><i className="statustnum">12</i></div>
                        <div className="margin-top-3">待收货</div>
                    </div>
                    <div onclick="window.location.href='016.html'" className="am-u-sm-3 ">
                        <div className="prelative"><img src="../assets/images/icons/icon_4.png" className="width-30px am-center"/><i className="statustnum">12</i></div>
                        <div className="margin-top-3">全部订单</div>
                    </div>
                </div>
            </div>

        )
    }
});

var Others = React.createClass({
    render: function(){
        return(
            <div className="am-margin-top-sm am-padding-left-sm am-padding-right-sm font-color-35 my-menu-list bg-white ">
                <div className="box prelative  border-bottom" onclick="window.location.href='019.html'">
                    <div className="width-32px  ">
                        <i className="my-icon my-icon-1"></i>
                    </div>
                    <div className="box-1     " >
                        <span className="prelative">帮助</span>
                    </div>
                    <i className="icon-arrow-right-0s"></i>
                </div>
                <div className="box  prelative border-bottom" >
                    <div className="width-32px  ">
                        <i className="my-icon my-icon-2"></i>
                    </div>
                    <div className="box-1     " >
                        <span className="prelative">向好友推荐</span>
                    </div>
                    <i className="icon-arrow-right-0s"></i>
                </div>
                <div className="box  prelative border-bottom" onclick="window.location.href='020.html'">
                    <div className="width-32px  ">
                        <i className="my-icon my-icon-7"></i>
                    </div>
                    <div className="box-1     " >
                        <span className="prelative">提点意见</span>
                    </div>
                    <i className="icon-arrow-right-0s"></i>
                </div>
                <div className="box  prelative " >
                    <div className="width-32px  ">
                        <i className="my-icon my-icon-8"></i>
                    </div>
                    <div className="box-1     " >
                        <span className="prelative">联系客服</span>
                    </div>
                    <i className="icon-arrow-right-0s"></i>
                </div>
            </div>

        )
    }
});
//todo 只渲染了页面
var Page = React.createClass({
    render: function() {
        return (
            <div>
            <PersonalHead/>
            <section className="am-padding-bottom-sm" id="amz-main" data-tag="css-nav">
                <UserInfo/>
                <Orders/>
                <Others/>
            </section>
            <Footer on={'personal'} />
            </div>
        )
    }

});

ReactDOM.render(
    <Page />,
    document.getElementById('root')
);